<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决方案管理</title>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
    <style>
        .badge {
            font-weight: normal;
        }
        .table img {
            object-fit: cover;
        }
    </style>
</head>
<body>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">解决方案管理</h5>
                    <a href="/apps/admin/products/new" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus"></i> 新建方案
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>排序</th>
                                    <th>名称</th>
                                    <th>图片</th>
                                    <th>分类</th>
                                    <th>等级</th>
                                    <th>标签</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#if products.length}}
                                    {{#each products}}
                                    <tr>
                                        <td>{{id}}</td>
                                        <td>{{sort_order}}</td>
                                        <td>
                                            <strong>{{name}}</strong>
                                            <div class="small text-muted">{{title}}</div>
                                        </td>
                                        <td>
                                            {{#if image}}
                                            <img src="{{image}}" alt="{{name}}" width="60" height="60" class="rounded">
                                            {{else}}
                                            <span class="text-muted">暂无图片</span>
                                            {{/if}}
                                        </td>
                                        <td>{{category}}</td>
                                        <td>{{evidence_level}}</td>
                                        <td>
                                            {{#each tags}}
                                            <span class="badge bg-info me-1">{{this}}</span>
                                            {{/each}}
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="/apps/admin/products/edit/{{id}}" class="btn btn-outline-primary">
                                                    <i class="fas fa-edit"></i> 编辑
                                                </a>
                                                <button type="button" class="btn btn-outline-danger" onclick="deleteProduct({{id}})">
                                                    <i class="fas fa-trash"></i> 删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {{/each}}
                                {{else}}
                                    <tr>
                                        <td colspan="8" class="text-center">暂无方案数据</td>
                                    </tr>
                                {{/if}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
<script src="/apps/js/bootstrap.bundle.min.js" defer></script>
<script src="/apps/js/wx-client-dom.js" defer></script>

<script>
    function deleteProduct(id) {
        if (!confirm('确定要删除此方案吗？此操作不可恢复。')) {
            return;
        }

        fetch(`/apps/admin/products/delete/${id}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showSystemNotification('success', '方案已成功删除');
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                showSystemNotification('error', `删除失败: ${data.message}`);
            }
        })
        .catch(error => {
            showSystemNotification('error', `删除失败: ${error.message}`);
        });
    }

    function showSystemNotification(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const icon = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';

        const alertDiv = document.createElement('div');
        alertDiv.className = `alert ${alertClass} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
        alertDiv.setAttribute('role', 'alert');
        alertDiv.style.zIndex = '9999';
        alertDiv.innerHTML = `
            <i class="${icon} me-2"></i> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
        `;

        document.body.appendChild(alertDiv);

        setTimeout(() => {
            alertDiv.classList.remove('show');
            setTimeout(() => {
                alertDiv.remove();
            }, 300);
        }, 3000);
    }
</script>
</body>
</html>
